<template>
	<view :class="leng>=8?'captain':'caption'">
		<view class="captaing" v-for="(v,i) in list" :key="i" >
			<view class="captas" >
				<text style="color: #042A58;font-size: 16px;margin-left: 15px;margin-right: 15px;">{{v.nickname}}</text>
			<text style="color: #627995;font-size: 16px;">{{v.account}}</text>
			</view>
			<view style="font-size: 14px;display: flex;justify-content: center;align-items: center;font-weight: 500;">
				<text  :class="v.status==0?'caps':'capted'">停用</text>
				<image src="../../static/img/icon_zhengchang.png" mode="" style="width: 50px;height: 28px;margin-left: 5px;margin-right: 5px;" v-show="v.status==0" @click="gong(i)"></image>
				<image src="../../static/img/icon_guanbi.png" mode="" style="width: 50px;height: 28px;margin-left: 5px;margin-right: 5px;" v-show="v.status==1" @click="gongs(i)"></image>
				<text style="margin-right: 15px;" :class="v.status==0?'capting':'caps'">启用</text>
			</view>
		</view>
		<view class="loading" v-if="list.length>=5">
			{{loadingTxt}}
		</view>
		<button @click="newcaotas">新增车队长</button>
	</view>
</template>

<script>
	var page=1
	import {ajaxs} from "../../apis.js"
	import {HZajax} from "../../HZapi.js"
	export default {
		data() {
			return {
				cap:true,
				loadingTxt:"加载更多",
				list:[],
				leng:""
			}
		},
		onShow() {
		this.captaed()
		},
			onPullDownRefresh() {
					this.captaed()
			},
			onReachBottom() {
				this.getcaptaed()
			},
		methods: {
			gong(i){
				var that=this
				uni.showModal({
							
				    content: '是否停用车队长',
									
				    success: function (res) {
									
				      if (res.confirm) {//这里是点击了确定以后
						HZajax({
							url:"/v1/manager/update/status",
							method:"post",
							data:{
								id:that.list[i].id,
								status:1,
							},
							success(res) {
								ajaxs({
										url:"/v1/manager/list",
										method:"post",
										success(res){
											that.list=res.data.list
										}
								})
							}
						})			
				      } else {//这里是点击了取消以后			
				      }			
				    }				
				  })
			},
			gongs(i){
				var that=this
				uni.showModal({
							
				    content: '是否启用车队长',
									
				    success: function (res) {
									
				      if (res.confirm) {//这里是点击了确定以后
						HZajax({
							url:"/v1/manager/update/status",
							method:"post",
							data:{
								id:that.list[i].id,
								status:0,
							},
							success(res) {
								ajaxs({
										url:"/v1/manager/list",
										method:"post",
										success(res){
											that.list=res.data.list
										}
								})
							}
						})			
				      } else {//这里是点击了取消以后			
				      }			
				    }				
				  })
			},
			// 列表
			getcaptaed(){
					var that=this
				this.loadingTxt="加载中"
				uni.showNavigationBarLoading()
				ajaxs({
					url:"/v1/manager/list",
					method:"post",
					data:{
						offset:page,
						limit:1
					},
					success(res){
						if(that.list.length==res.data.total){
							  that.loadingTxt="已经全部加载"
									   uni.hideNavigationBarLoading()
									  return false
						}
						uni.hideNavigationBarLoading()
						that.list=that.list.concat(res.data.list)
						uni.stopPullDownRefresh()
						 page++
						   that.loadingTxt="加载更多"
					}
				})
			},
			captaed(){
					var that=this
				  uni.showNavigationBarLoading()
				  page=1
				ajaxs({
					url:"/v1/manager/list",
					method:"post",
					data:{
						offset:page,
						limit:10
					},
					success(res){
						that.list=res.data.list
						that.leng=that.list.length
						uni.stopPullDownRefresh()
						 uni.hideNavigationBarLoading()
						 page++
					}
				})
			},
			newcaotas(){
				uni.navigateTo({
					url:"./captains"
				})
			}
		}
	}
</script>

<style>
	.loading{
		text-align: center;
		color: #888;
		margin-top:10px ;
		height:80px;
	}
	page{
		height: 100%;
	}
.captain{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #F5F5F5;
}
.caption{
	width: 100%;
	height: 610px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #F5F5F5;
}
.captaing{
	width:355px;
	height:60px;
	background:rgba(255,255,255,1);
	border-radius:8px;
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.captas{
	display: flex;
	align-items: center;
}
.caps{
	color:#C8C8C8;
}
.capted{
	color: #FE0700;
}
.capting{
	color: #00A56C;
}
button{
	width:355px;
	height:44px;
	background:rgba(4,42,88,1);
	border-radius:8px;
	color: #FFFFFF;
	position: fixed;
	bottom: 10px;
}
</style>
